<template>
  <div class="translate">
    <h1>在线翻译</h1>
    <h5 class="text-muted">简单 / 易用 / 便捷</h5>
    <translateForm v-on:fSubmit="translateText"></translateForm>
    <translateOutput :translatedText="translatedText"></translateOutput>
  </div>
</template>

<script>
import TranslateForm from './TranslateForm'
import TranslateOutput from './TranslateOutput'

export default {
  name: 'translate',
  data() {
    return {
      translatedText:""
    }
  },
  methods: {
    translateText:function(text, language) {
      this.$http.get("https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20180524T164641Z.f831cf482319ec01.48cbad58745650f9f36d4aec600d0c267e7a9247&lang="+language+"&text=" + text)
                .then((response)=>{
                  this.translatedText = response.body.text[0];
                })
    }
  },
  components: {
    TranslateForm,TranslateOutput    
  },
  created() {
    
  }
}
</script>

<style scoped>
.translate {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}
</style>
